<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{a}}</p>
        <p><button @click="a++">点击</button></p>
        <!-- <p>{{b}}</p>
        <p><button @click="b++">点击</button></p> -->
        <p>{{info.b}}</p>
        <p><button @click="info.b++">点击</button></p>
    </div>
</body>
<script>
    // 初始化渲染
    var vm = new Vue({
        el:"#app",
        data:{
            // 初始化渲染过程中,对data中的属性a 绑定了数据监听, 当a的值发生变化之后会触发视图更新
            a:1,
            // 根级别的数据(直接写在data上)
            // b:null,     // 根级别建议提前将数据挂载到data中 (可以监听数据的变化)

            // 非根级别 (data下的子对象中的数据)
            info:{
                // b:null
            }
        },
        mounted() {
            // 但是有的时候我希望在某些异步操作结束之后 =>在挂载数据到 data中

            // 对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property
            // 下面代码不会生效 => 向Vue实例跟级别添加响应数据(data)
            // this.b = 20;   // 通过实例化对象新增属性b => 等价于对 data.b 中的b进行赋值  => 但是data中没有定义b属性 
            // this.$data.b = 20;
            // console.log(this.$data);
            // this.$set(this.$data, 'b', 2)


            // 可以使用 this.$set(someObject, propertyName, value) 方法向嵌套对象(非根级别的对象)添加响应式属性(property)  => 当被添加的属性发生改变 => 也会被数据监听进制捕获到 =>  触发视图更新 

            // 适用于新增自定义属性到非根级别的数据中
            this.$set(this.info, 'b', 2);
        },
    })

    // vm.b = 20;
    // console.log(vm);
</script>
</html>